<template>
  <DetailBox :title="getRouteTitle()" :border="2">
    <template #center>
      <slot name="center">
        <ContentBox :border="3" :marginHeight="192">
          <template #center>
            <slot name="center">
              <div class="container_max">
                <!-- 核心画布 -->
                <VFlowGraph v-model:is-ready="isReady" :graphType="graphType" />
                <template v-if="isReady">
                  <!--                  <FoldBtn/>-->
                  <!-- 顶部快捷工具 -->
                  <TopToolBar :graphType="graphType" />
                  <!-- 流程图节点 -->
                  <StencilTool :graphType="graphType" />
                  <!-- 节点属性 -->
                  <ConfigPanel />
                </template>
              </div>
            </slot>
          </template>
        </ContentBox>
      </slot>
    </template>
  </DetailBox>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import VFlowGraph from '@/views/components/flowGraph/components/VFlowGraph.vue';
import StencilTool from '@/views/components/flowGraph/components/StencilTool.vue';
import TopToolBar from '@/views/components/flowGraph/components/TopToolBar.vue';
import FoldBtn from './components/FoldBtn.vue'
import ConfigPanel from '@/views/components/flowGraph/components/ConfigPanel/index.vue';

import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";
import {getRouteTitle} from "@/utils";

const isReady = ref(false);
const graphType = ref('tree')
</script>

<style lang="scss" scoped>
.container_max {
  width: 100%;
  height: calc(100vh - 140px);
  overflow: hidden;
  position: relative;
}
</style>
